<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
     
      .friend{
      	border: solid 1px #669CEE;
      	color: white;
      	float: left;
      	width: 80px;
      	background-color: #669CEE
      }
    </style>


	<title>Friend Map</title>
	<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
</head>
<body>
	<div id="container"></div>
	<script src="https://webapi.amap.com/maps?v=1.3&key=af47cfc3bd61f966cdc587476f007730&callback=init"></script>
	<script>
	function init(){
		var map = new AMap.Map('container', {
			center: [116.467689,39.881778],
			zoom: 12
		});
		map.plugin(["AMap.ToolBar"], function() {
			map.addControl(new AMap.ToolBar());
		});
		<!-- friends -->
		var content2= '<div class="friend">zhangsan</div>';
		marker2 = new AMap.Marker({
			position: [116.444189,39.884768],
			offset: new AMap.Pixel(0,0),
			map: map,
			title: 'CTO 18888888888',
			content: content2
		});
	}
	</script>
</body>
</html>
